<template>
  <div class="CPT_Icon">
    <svg v-if="iconType === 'colorful'" class="colorfulIcon" aria-hidden="true">
      <use :xlink:href="'#win-' + icon"></use>
    </svg>
    <i v-else :class="icon" />
  </div>
</template>
<script>
export default {
  inheritAttrs: false,
  name: "CPT_Icon",
  props: {
    meta: {
      type: [Object, String],
      default: () => {
        return {
          iconType: "colorful",
          label: "多色图标",
          icon: "unknow",
        }
      },
    },
  },
  computed: {
    icon() {
      //meta可当做图标名
      const meta = this.meta,
        metaType = this.$getType(meta)
      if (metaType === "String") {
        return meta
      } else {
        const { icon, type } = meta
        //没有定义icon时，以type为准，都没有时爱咋咋地，反正就显示个未知了
        return icon || type || "unknow"
      }
    },
    iconType() {
      const { iconType } = this.meta
      //默认多色
      return iconType || "colorful"
    },
  },
  data() {
    return {
      mounted: false,
    }
  },
  watch: {
    icon: {
      immediate: true,
      handler: function (n) {
        if (n) {
          this.mounted = true
        }
      },
    },
  },
}
</script>
<style lang="scss" scope>
.CPT_Icon,
.colorfulIcon {
  width: 1em;
  height: 1em;
}
</style>
